<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #mDiv {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -125px;
            height: 150px;
            width: 250px;
            border: 1px solid black;
            border-radius: 3px;
        }

        #tDiv {
            height: 22px;
            width: 100%;
            font-size: 18px;
        }

        #mP {
            margin: 3px 0px 0px 0px;
        }

        #tButton {
            position: absolute;
            bottom: 4px;
            right: 4px;
        }
        #fButton {
            position: absolute;
            bottom: 4px;
            right: 49px;
        }
    </style>
</head>

<body>
    <div>
        <span>标题</span>
        <input type="text" id="title">
    </div>
    <div>
        <span>内容</span>
        <input type="text" id="value">
    </div>
    <button onclick="jump()">弹出弹窗</button>
</body>

</html>
<script>
    alert('输入标题内容点击弹窗，取消关闭弹窗不改变输入数据，确定清空输入')
    let title = document.getElementById("title");
    let mValue = document.getElementById("value");
    let _body = document.getElementsByTagName('body')[0];
    function jump() {
        let isM = document.getElementById('mDiv')
        if (isM) {
            _body.removeChild(isM);
            jump();
        } else {
            let mDiv = document.createElement('div');
            let tDiv = document.createElement('div');
            let mP = document.createElement('p');
            let mFalse = document.createElement('button');
            let mTrue = document.createElement('button');
            mDiv.id = 'mDiv';
            tDiv.id = 'tDiv';
            mP.id = 'mP';
            mFalse.id = 'fButton';
            mTrue.id = 'tButton';
            mFalse.innerText = '取消';
            mTrue.innerText = '确定 ';
            tDiv.innerText = title.value;
            mP.innerText = mValue.value;
            mDiv.appendChild(tDiv);
            mDiv.appendChild(mP);
            mDiv.appendChild(mFalse);
            mDiv.appendChild(mTrue);
            _body.appendChild(mDiv);
        }
        document.getElementById('fButton').addEventListener('click', function () {
            let isM = document.getElementById('mDiv')
            _body.removeChild(isM);
        })
        document.getElementById('tButton').addEventListener('click', function () {
            let isM = document.getElementById('mDiv')
            _body.removeChild(isM);
            title.value = '';
            mValue.value = '';
        })
    }
</script>